
<template>
  <el-form
    class="search-form"
    :inline="true"
    :model="searchForm"
    style="display: flex; flex-wrap: wrap"
  >
    <!-- 貨幣 -->
    <el-form-item
      class="select-item"
      v-if="searchFormConfig.currency"
      :style="{ order: searchFormConfig.currency.order }"
    >
      <!-- <div class="date-key">{{ searchFormConfig.currency.name }}</div> -->
      <el-select
        v-model="searchForm.currency"
        size="large"
        placeholder="請选择貨幣類型"
      >
        <el-option
          v-for="item in currencies"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- 商戶號 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.busiId"
      :style="{ order: searchFormConfig.busiId.order }"
    >
      <div class="date-key">{{ searchFormConfig.busiId.name }}</div>
      <el-input v-model="searchForm.busiId" size="large" placeholder="請輸入" />
    </el-form-item>
    <!-- 公司名 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.companyName"
      :style="{ order: searchFormConfig.companyName.order }"
    >
      <div class="date-key">{{ searchFormConfig.companyName.name }}</div>
      <el-input
        v-model="searchForm.companyName"
        size="large"
        placeholder="請輸入"
      />
    </el-form-item>
    <!-- 注册邮箱 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.email"
      :style="{ order: searchFormConfig.email.order }"
    >
      <div class="date-key">{{ searchFormConfig.email.name }}</div>
      <el-input v-model="searchForm.email" size="large" placeholder="請輸入" />
    </el-form-item>
    <!-- 商户等级 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.merchantLevel"
      :style="{ order: searchFormConfig.merchantLevel.order }"
    >
      <div class="date-key">{{ searchFormConfig.merchantLevel.name }}</div>
      <el-input
        v-model="searchForm.merchantLevel"
        size="large"
        placeholder="請輸入"
      />
    </el-form-item>
    <!-- 渠道编码 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.sourceEncoding"
      :style="{ order: searchFormConfig.sourceEncoding.order }"
    >
      <div class="date-key">{{ searchFormConfig.sourceEncoding.name }}</div>
      <el-input
        v-model="searchForm.platformOrderId"
        size="large"
        placeholder="請輸入"
      />
    </el-form-item>
    <!-- 渠道訂單號 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.sourceOrderId"
      :style="{ order: searchFormConfig.sourceOrderId.order }"
    >
      <div class="date-key">{{ searchFormConfig.sourceOrderId.name }}</div>
      <el-input
        v-model="searchForm.sourceOrderId"
        size="large"
        placeholder="請輸入"
      />
    </el-form-item>
    <!-- 類型 -->
    <el-form-item
      class="select-item"
      v-if="searchFormConfig.operateType"
      :style="{ order: searchFormConfig.operateType.order }"
    >
      <div class="date-key">{{ searchFormConfig.operateType.name }}</div>
      <el-select
        v-model="searchForm.operateType"
        size="large"
        placeholder="請选择操作類型"
      >
        <el-option
          v-for="item in operateTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- 日期範圍 -->
    <el-form-item
      class="date-range-item"
      v-if="searchFormConfig.date"
      :style="{ order: searchFormConfig.date.order }"
    >
      <div class="date-key">{{ searchFormConfig.date.name }}</div>
      <el-date-picker
        v-model="searchForm.dateRange"
        type="daterange"
        range-separator="——"
        start-placeholder="開始時間"
        end-placeholder="結束時間"
      />
    </el-form-item>
    <!-- 平臺訂單號 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.platformOrderId"
      :style="{ order: searchFormConfig.platformOrderId.order }"
    >
      <div class="date-key">{{ searchFormConfig.platformOrderId.name }}</div>
      <el-input
        v-model="searchForm.platformOrderId"
        size="large"
        placeholder="請輸入平臺訂單號"
      />
    </el-form-item>
    <!-- 商戶訂單號 -->
    <el-form-item
      class="input-item"
      v-if="searchFormConfig.merchantOrderId"
      :style="{ order: searchFormConfig.merchantOrderId.order }"
    >
      <div class="date-key">{{ searchFormConfig.merchantOrderId.name }}</div>
      <el-input
        v-model="searchForm.merchantOrderId"
        size="large"
        placeholder="請輸入商戶訂單號"
      />
    </el-form-item>
    <!-- 订单狀態 -->
    <el-form-item
      class="select-item"
      v-if="searchFormConfig.orderStatus"
      :style="{ order: searchFormConfig.orderStatus.order }"
    >
      <div class="date-key">{{ searchFormConfig.orderStatus.name }}</div>
      <el-select
        v-model="searchForm.orderStatus"
        size="large"
        placeholder="請选择操作類型"
      >
        <el-option
          v-for="item in orderStatuses"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- 查詢按鈕 -->
    <el-form-item class="search-btn-item" style="order: 9999">
      <el-button type="primary" @click="onClickSearch">查詢</el-button>
      <el-button type="primary" @click="onClickClear">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useSelectOptionsStore } from "@/store/index";
import { filterEffectObj, formatDate, getDateAnd7DaysAgo } from "@/utils/index";
import { OPERATE_TYPES, ORDER_STATUSES } from "@/utils/selectOptions";
import { computed } from "vue";

const props = defineProps({
  searchFormConfig: {
    type: Object,
    default: () => ({}),
  },
});
// 貨幣類型选项
// const currencies = ref([
//   { value: "USD", label: "美元" },
//   { value: "EUR", label: "歐元" },
//   { value: "JPY", label: "日圓" },
//   { value: "GBP", label: "英鎊" },
// ]);
let currencies = ref([]);
// 操作類型选项
const operateTypes = ref(OPERATE_TYPES);

// 订单狀態
const orderStatuses = ref(ORDER_STATUSES);

const searchForm = reactive({
  busiId: "",
  currency: "",
  dateRange: "",
  operateType: "",
  platformOrderId: "",
  merchantOrderId: "",
  orderStatus: "",
  companyName: "",
  email: "",
  merchantLevel: "",
  sourceEncoding: "",
  sourceOrderId: "",
});

const emit = defineEmits(["search", "clear"]);

// 点击搜索按钮
const onClickSearch = () => {
  const searchFormFiltered = filterEffectObj(
    searchForm,
    (value) => value !== ""
  );
  if (
    searchFormFiltered.dateRange &&
    typeof searchFormFiltered.dateRange[0] !== "string"
  ) {
    searchFormFiltered.dateRange[0] = formatDate(
      searchFormFiltered.dateRange[0]
    );
    searchFormFiltered.dateRange[1] = formatDate(
      searchFormFiltered.dateRange[1]
    );
  }
  emit("search", searchFormFiltered);
};

// 点击清空按钮
const onClickClear = () => {
  searchForm.busiId = "";
  searchForm.currency = currencies.value[0].value;
  const { today, sevenDaysAgo } = getDateAnd7DaysAgo();
  searchForm.dateRange = [sevenDaysAgo.date, today.date];
  searchForm.operateType = operateTypes.value[2].value;
  searchForm.platformOrderId = "";
  searchForm.merchantOrderId = "";
  searchForm.orderStatus = "";
  searchForm.companyName = "";
  searchForm.email = "";
  searchForm.merchantLevel = "";
  searchForm.sourceEncoding = "";
  searchForm.sourceOrderId = "";
  emit("clear");
};

const initSelectOptions = () => {
  // 获取货币选项
  const selectOptionsStore = storeToRefs(useSelectOptionsStore());
  currencies = selectOptionsStore.currencies;
  if (currencies.value.length > 0) {
    searchForm.currency = currencies.value[0].value;
  } else {
    watch(selectOptionsStore.currencies, (newVal) => {
      if (newVal.length > 0) {
        currencies.value = newVal;
        searchForm.currency = newVal[0].value;
      }
    });
  }
  // 操作類型选项
  searchForm.operateType = operateTypes.value[2].value;
  // 日期范围
  const { today, sevenDaysAgo } = getDateAnd7DaysAgo();
  searchForm.dateRange = [sevenDaysAgo.date, today.date];
};

initSelectOptions();

defineExpose({
  dateRange: computed(() => searchForm.dateRange),
  searchForm,
})
</script>

<style scoped lang="scss">
.date-key {
  border-radius: 3px;
  background: #979797;
  padding: 0 15px;
  height: 34px;
  color: #ffffff;
  text-align: center;
  line-height: 34px;
  margin-right: 10px;
  flex-shrink: 0;
}

.search-form {
  :deep(.select-item) {
    .el-form-item__content {
      flex-wrap: nowrap;
      flex-shrink: 0;

      .el-select--large {
        width: 8vw;

        .el-select__wrapper {
          background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
          height: 34px;
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }
  }

  :deep(.date-range-item) {
    .el-form-item__content {
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .el-range-editor.el-input__wrapper {
      height: 34px;
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    }
  }

  :deep(.search-btn-item) {
    .el-form-item__content {
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .el-button.el-button--primary {
      width: 140px;
      height: 34px;
      background-color: #2fc2af;
    }
  }

  :deep(.input-item) {
    .el-form-item__content {
      flex-wrap: nowrap;
      flex-shrink: 0;

      .el-input__wrapper {
        background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
        height: 34px;
      }
    }
  }
}
</style>
